<template>
	<view >
		<!-- 用户界面 -->
		<view class="userinfo flex flexBei">
			<view class="info flex">
				<image :src="this.info.hesd_portrait"></image>
				<view class="details">
					<view class="name">{{ this.info.name }}</view>
					<view class="instoduction textHd">{{ this.info.user_motto }}</view>
				</view>
			</view>
			<button @click="attendtionOperation">{{ isfollow ? '已关注' : '关注' }}</button>
		</view>
		<!-- 轮播图 -->
		<view class="swiper">
			<swiper :indicator-dots="(info.picture.split(';').length > 1)" autoplay :circular="true" :interval="3000" :duration="1000" >
				<swiper-item v-for="(item, index) in info.picture.split(';')" :key="index" >
					<image :src="item" mode="aspectFill" ></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 游记主体内容 -->
		<view class="content">
			<view class="">
				{{this.info.post_content | emojoy}}
			</view>
		</view>
		<view class="foot flex flexBei">
			<view class="time textHd">
				发布时间:{{info.create_time}}
			</view>
			<view class="icons flex">
				<view class="iconItem flex" @click="startUpdate">
					<view class="iconfont inview " :class="(islike ? 'icon-zan' : 'icon-zan')"></view>
					<text>{{info.likes > 999 ? '999+': info.likes}}</text>
				</view>
				<view class="iconItem flex">
					<view class="iconfont inview icon-liulan-copy"></view>
					<text>{{commentCount > 999 ? '999+' : commentCount}}</text>
				</view>
			</view>
		</view>
		<!-- 评论区域 -->
		<view class="comment">
			<view class="header">评论({{ this.commentCount }})</view>
		   <u-empty mode="list" text="评论为空" v-show="(this.commentList.length === 0)"></u-empty>
			<Comment :list="commentList"></Comment>
		</view>
		<!-- 底部操作栏 -->
		<view class="bottom">
			<view class="flex">
			<input type="text" :style="{ width: this.inputWidth }" v-model="commentContent"  placeholder="发表你的评论"  />
			<view  class="send" @click="sendTravelComment">发送</view>
		</view>
		</view>
		<!-- 提示栏 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import { gettraveldet, updatetravelspot, sendtravelcomment, getcategorytravel } from '../../api/travel.js';
import { isattention, addfollow, deletefollow } from '../../api/follow_like.js';
import { utf16toEntities } from '../../utils/emjoy.js'

import Comment from '../../components/comments.vue'
import travel from '../../components/travel.vue';

export default {
	data() {
		return {
			list: ['../../static/scene2.jpg', '../../static/scene1.jpg', '../../static/scene.jpg'],
			isfollow: false,
			islike: false,
			inputWidth: '580rpx',
			info: {
				picture: ''
			},
			postId: '',
			commentList: [],
			commentContent: '',
			commentCount: '',
			isfocus: false,
		};
	},
	components: {
		travel,
		Comment
	},
	onLoad(e) {
		this.postId = e.id;
		uni.setNavigationBarTitle({
			title: '游记详情'
		})
	},
	mounted() {
		this.getTravelDet();
	},
	methods: {
		// 跳转至详情页
		navtoTravelDetails() {},
		// 获取游记详情
		async getTravelDet() {
			const res = await gettraveldet({ postId: this.postId });
			this.info = res.data.data.data;
			this.info.create_time = this.info.create_time.slice(0, 10)
			this.commentCount = res.data.data.discussCount;
			this.commentList = res.data.data.discuss;
			this.isAttention();
		},
		// 是否已经关注
		async isAttention() {
			const params = {
				followId: this.info.user_id,
				mineId: this.$store.state.userinfo.userId
			};
			const res = await isattention(params);
			this.isfollow = res.data.data.isFollow;
		},
		// 
		attendtionOperation () {
			this.debounce(this.setFollow)
		},
		// 关注或取消关注某个用户
		async setFollow () {
			const params = {
				followId: this.info.user_id,
				mineId: this.$store.state.userinfo.userId
			};
			if (this.isfollow) { // 取消关注
				await deletefollow(params)
			} else { // 关注
				await addfollow(params)
			}
			this.getTravelDet()
			this.$store.dispatch('getUserInfo')
		},
		// 发送游记评论
		async sendTravelComment() {
			if (this.commentContent === '') {
			this.$refs.uToast.show({
				title: '输入框内容不能为空',
				position: 'top'
				})
				return 
			} else {
				const params = {
					discussConent: utf16toEntities(this.commentContent),
					userId: this.$store.state.userinfo.userId,
					postId: this.postId
				};
				const res = await sendtravelcomment(params)
				this.commentContent = ''
				this.getTravelDet();
			}
		},
		spotOperation () {
			this.debounce(this.updateSpot)
		},
		// 游记点赞 修改
		async updateSpot() {
			let likes;
			if (!this.islike) {
				likes = (this.info.likes ==  undefined ? 0 : this.info.likes)* 1 + 1;
			} else {
				likes = (this.info.likes == undefined ? 0 : this.info.likes)* 1 - 1;
			}
			const res = await updatetravelspot({ likes, postId: this.postId });
			this.islike = !this.islike;
			this.getTravelDet();
		},
	}
}
</script>

<style lang="scss" scoped>
/* 头部区域 */
.userinfo {
	width: 100%;
	background-color: #fff;
	padding: 18rpx 24rpx;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2000;
	border-bottom: 1rpx solid #fafafa;
	.info {
		image {
			width: 70rpx;
			height: 70rpx;
			border-radius: 12rpx;
		}
		.details {
			width: 420rpx;
			margin-left: 18rpx;
			.instoduction {
				color: #999;
				font-size: 22rpx;
			}
		}
	}
	button {
		margin: 0;
		height: 46rpx;
		background-color: #13c2c2;
		color: #fafafa;
		font-size: 24rpx;
		line-height: 46rpx;
		border-radius: 8rpx;
	}
}
/* 轮播图 */
.swiper {
	margin-top: 80rpx;
	width: 100wh;
	image {
		width: 100%;
		height: 360rpx;
	}
}
/* 文章主体 */
.content {
	margin-top: 24rpx;
	background-color: #fff;
	color: #999;
	padding: 24rpx;
	text-indent: 2em;
}
/* 内容主体 */
.foot {
	background-color: #fff;
	padding: 24rpx   24rpx 0 24rpx;
		.time {
			width: 400rpx;
			color: #999;
			font-size: 26rpx;
		}
		.icons {
			width: 280rpx;
			display: flex;
			justify-content: flex-end;
			.iconItem {
				width: 130rpx;
				text-align: center;
				color: $theme-color;
				font-weight: bold;
				.iconfont {
					padding-right: 8rpx;
					font-size: 36rpx;
					
				}
			}
		  }	
	}
/* 评论 */
.comment {
	margin-top: 30rpx;
	margin-bottom: 120rpx;
	padding: 12rpx 24rpx;
	background-color: #fff;
	.header {
		height: 92rpx;
		line-height: 92rpx;
		font-size: 34rpx;
		font-weight: bolder;
	}
	.commentItem {
		padding: 18rpx 12rpx;
		border-bottom: 1rpx solid #fafafa;
		image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 12rpx;
		}
		.comment_content {
			width: 600rpx;
			.commentdetails {
				text-indent: 2em;
				font-size: 20rpx;
			}
		}
	}
}
/* 推荐游记 */
.recommendTravel {
	padding-bottom: 110rpx;
	.header {
		padding: 0 24rpx;
		background-color: #fff;
		height: 92rpx;
		line-height: 92rpx;
		font-size: 34rpx;
		font-weight: bolder;
	}
}
/* 底部 */
.bottom {
	border-top: 1rpx solid #fafafa;
	width: 100%;
	background-color: #fff;
	padding: 12rpx 24rpx;
	position: fixed;
	line-height: 68rpx;
	bottom: 0rpx;
	left: 0;
	input {
		height: 56rpx;
		padding: 6rpx;
		font-size: 24rpx;
		background-color: #e3e3e3;
		border-radius: 18rpx;
	}
	.send {
		margin-left: 16rpx;
		width: 120rpx;
		background-color: $theme-color;
		color: #fff;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		border-radius: 18rpx;
	}
}
</style>
